<template>
  <div>
    <div class="article-page" v-if="list.length > 0">
      <div
        v-for="item in list"
        :key="item.id"
        class="article-item"
        @click="goDetail(item.id)"
      >
        <div class="head">
          <img :src="item.creatorAvatar" alt="" />
          <div class="con">
            <p class="title">{{ item.stem }}</p>
            <p class="other">{{ item.creatorName }} | {{ item.createdAt }}</p>
          </div>
        </div>
        <div class="body">{{ item.content }}</div>
        <div class="foot">
          点赞 {{ item.likeCount }} | 浏览 {{ item.views }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'HomeCom1',
  data () {
    return {
      list: [],
      top: 0
    }
  },
  //进来的时候就执行  activated
  activated () {
    console.log('home=====activated')
    document.body.scrollTop = this.top
  },
  //跳转出去就执行 deactivated
  deactivated () {
    console.log('hone ====deactivated')
    this.top = document.body.scrollTop
  },
  async created () {
    const res = await axios.get(
      'https://mock.boxuegu.com/mock/3083/articles',
    );
    console.log(res)
    this.list = res.data.result.rows
  },
  computed: {
  },
  methods: {
    goDetail (id) {
      this.$router.push({ name: 'detail', params: { id } })
    }
  }
}
</script>
<style lang='less'  scoped>
.head {
  display: flex;
}
</style>
